<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en">
	<head>
		<meta charset="utf-8" />

		<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
		Remove this if you use the .htaccess -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

		<title>reddit.com</title>
		<meta name="description" content="" />
		<meta name="author" content="Karo" />

		<meta name="viewport" content="width=device-width, initial-scale=1.0" />

		<!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
		<link rel="shortcut icon" href="images/favicon.ico" />
		<link rel="stylesheet" type="text/css" href="css/reset-searchbox.css"/>
		<link rel="stylesheet" type="text/css" href="css/main.css"/>
		<link rel="stylesheet" type="text/css" href="css/navigation.css"/>
		<link rel="stylesheet" type="text/css" href="css/footer.css"/>
		<link rel="stylesheet" type="text/css" href="css/jquery.jscrollpane.css"/>
		<link rel="stylesheet" type="text/css" href="css/buttons.css"/>
		<link rel="stylesheet" type="text/css" href="css/drop-down-menu.css"/>
		<link rel="stylesheet" type="text/css" href="css/comments.css"/>

		<script type="text/javascript" src="js/bib/jquery-1.9.0.js"></script>
		<script type="text/javascript" src="js/bib/jquery-ui.js"></script>
		
		<script type="text/javascript" src="js/bib/mootools/mootools-1.2.4-core.js"></script>
		<script type="text/javascript" src="js/bib/mootools/mootools-1.2.4.4-more.js"></script>
		<script type="text/javascript" src="js/bib/mootools/Scrollbar.js" charset="utf-8"></script>
		
		<script type="text/javascript" src="js/bib/jscrollpane/jquery.jscrollpane.min.js"></script>
		<script type="text/javascript" src="js/bib/jscrollpane/jquery.mousewheel.js"></script>
		
		<script type="text/javascript" src="js/basicSettings.js"></script>
		<script type="text/javascript" src="js/scrollbars.js"></script>
		<script type="text/javascript" src="js/transitions.js"></script>
		<script type="text/javascript" src="js/login.js"></script>
		
		<script type="text/javascript" src="js/content-header.js"></script>

	</head>

	<body>
		<header>
			<div id="logo">
				<a href="#"><img id="redditlogo" src="images/reddit-logo.png" alt="reddit-logo.png"/></a>
			</div>
			<div id="useroptions" class="link">
				<p>login</p>
				<div id="arrow_useroptions"> </div>
			</div>
			<div id="drop_down_menu">
				<form id="login_form" class="login_off">
					<input type="text" placeholder="username"/>
					<input type="password" placeholder="password"/> 
					<button id="submit_login_form" type="button" value="submit">login</button>
				</form>
				
				<div id="create_account" class="login_off">
					<p class="link">create account</p>
				</div>
				
				<div id="settings" class="login_on">
					<p class="link">settings</p>
				</div>
				
				<div id="logout" class="login_on">
					<p class="link">logout</p>
				</div>
				
				<div id="menu_arrow_border"> </div>
				<div id="menu_arrow"> </div>
			</div>
		</header>

		<nav>

			<!-- search box -->

			<div id="search">
				<img id="magnifying_glass" src="images/magnifying glass.png" alt=""/>
				<input id="searchinput" type="search" placeholder="search subreddits.."/>
			</div>

			<!-- new folder button -->

			<div id="folderoptions" class="login_on">
				<img id="foldericon" class="link" src="images/folder_icon.png" alt=""/>
				<p class="link">new folder</p>
			</div>

			<!-- List of subreddits -->

			<div id="subredditlist">
				<ul id="list">
					<li class="listitem">
						<div class="draggable"><div class="dot"> </div></div>
						<label class="link">all</label>
					</li>
					<li class="folder listitem">
						<div class="foldericon"> </div>
						<label class="link">favorites</label>
						<ul class="sublist">
							<li class="sublistitem">
								<div class="draggable"><div class="dot"> </div></div>
								<label class="link">random</label>
							</li>
							<li class="sublistitem">
								<div class="draggable"><div class="dot"> </div></div>
								<label class="link">funny</label>
							</li>
							<li class="sublistitem">
								<div class="draggable"><div class="dot"> </div></div>
								<label class="link">pics</label>
							</li>
							<li class="sublistitem">
								<div class="draggable"><div class="dot"> </div></div>
								<label class="link">movies</label>
							</li>
						</ul>
					</li>
					<li class="folder listitem">
						<div class="foldericon"> </div>
						<label class="link">my reddits</label>
						<ul class="sublist">
							<li class="sublistitem">
								<div class="draggable"><div class="dot"> </div></div>
								<label class="link">random</label>
							</li>
							<li class="sublistitem">
								<div class="draggable"><div class="dot"> </div></div>
								<label class="link">funny</label>
							</li>
							<li class="sublistitem">
								<div class="draggable"><div class="dot"> </div></div>
								<label class="link">pics</label>
							</li>
							<li class="sublistitem">
								<div class="draggable"><div class="dot"> </div></div>
								<label class="link">movies</label>
							</li>
						</ul>
					</li>
					<li class="listitem selectedlistitem">
						<div class="draggable"><div class="dot"> </div></div>
						<label class="link">politics</label>
					</li>
					<li class="listitem">
						<div class="draggable"><div class="dot"> </div></div>
						<label class="link">gaming</label>
					</li>
					<li class="listitem">
						<div class="draggable"><div class="dot"> </div></div>
						<label class="link">askreddit</label>
					</li>
					<li class="listitem">
						<div class="draggable"><div class="dot"> </div></div>
						<label class="link">videos</label>
					</li>
					<li class="listitem">
						<div class="draggable"><div class="dot"> </div></div>
						<label class="link">aww</label>
					</li>
					<li class="listitem">
						<div class="draggable"><div class="dot"> </div></div>
						<label class="link">worldnews</label>
					</li>
					<li class="listitem">
						<div class="draggable"><div class="dot"> </div></div>
						<label class="link">wtf</label>
					</li>
					<li class="listitem">
						<div class="draggable"><div class="dot"> </div></div>
						<label class="link">technology</label>
					</li>
					<li class="listitem">
						<div class="draggable"><div class="dot"> </div></div>
						<label class="link">atheism</label>
					</li>
					<li class="listitem">
						<div class="draggable"><div class="dot"> </div></div>
						<label class="link">today i learned</label>
					</li>
					<li class="listitem">
						<div class="draggable"><div class="dot"> </div></div>
						<label class="link">science</label>
					</li>
					<li class="listitem">
						<div class="draggable"><div class="dot"> </div></div>
						<label class="link">movies</label>
					</li>
					<li class="listitem">
						<div class="draggable"><div class="dot"> </div></div>
						<label class="link">best of reddit</label>
					</li>
				</ul>
			</div>
			<div id="bar"><div id="knob"> </div></div>
		</nav>
		
		<!-- CONTENT -->

		<div id="content">
        
            <div id="content-header">
                <a id="link_hot" onclick="emphasise(this)" href="#hot" class="selected">hot</a>
                <a id="link_new" onclick="emphasise(this)" href="#new">new</a>
                <a id="link_con" onclick="emphasise(this)" href="#controversal">controversal</a>
               
               <div id="content-header-buttons">
                    <span id="button-list" onclick="emphasise(this); switchView(this);" class="selected"> </span>
                    <span id="button-thumb" onclick="emphasise(this);switchView(this);"> </span>          
               </div>
            </div>
            
            <div id="content-body" class="list-view">
                <!-- link 1 -->
                <div class="link" id="1">
                    <div class="arrow" onclick="expand(this)"><img src="images/content/arrow.png" alt=""/> 1</div>
                    <div class="voting"><img src="images/content/voting.png" alt=""/></div>
                    <div class="rank">1682</div>
                    <div class="thumb"><img src="images/content/thumb1.png" alt=""/></div>
                    <div class="link-title"><a href="#link1">Bomb Explodes Right Near Anderson Cooper During Live Report From Gaza</a>
                         <span class="link-src"><a href="#link1src">(washintonpost.com)</a></span>
                    </div>
                    <div class="link-meta">posted: 24.10.2012 13:33 by userXYZ | subreddit: videos</div>
                </div>
                <!-- link 2 --> 
                <div class="link" id="2">
                    <div class="arrow" onclick="expand(this)"><img src="images/content/arrow.png" alt=""/> 2</div>
                    <div class="voting"><img src="images/content/voting.png" alt=""/></div>
                    <div class="rank">1600</div>
                    <div class="thumb"><img src="images/content/thumb2.png" alt=""/></div>
                    <div class="link-title"><a href="#link2">Bomb Explodes Right Near Anderson Cooper During Live Report From Gaza</a>
                         <span class="link-src"><a href="#link2src">(usatoday.com)</a></span>
                    </div>
                    <div class="link-meta">posted: 25.03.2012 15:13 by anotheruser | subreddit: politics</div>
                </div>
                <!-- link 3 -->
                <div class="link" id="3">
                    <div class="arrow" onclick="expand(this)"><img src="images/content/arrow.png" alt=""/> 3</div>
                    <div class="voting"><img src="images/content/voting.png" alt=""/></div>
                    <div class="rank">1599</div>
                    <div class="thumb"><img src="images/content/thumb3.png" alt=""/></div>
                    <div class="link-title"><a href="#link3">German cancer experts are warning of a looming shortage of one of the most widely u... (...)</a>
                         <span class="link-src"><a href="#link3src">(med.com)</a></span>
                    </div>
                    <div class="link-meta">posted: 15.11.2012 11:59 by germanguy | subreddit: worldnews</div>
                </div>
                <!-- link 4 -->
                 <div class="link" id="4">
                    <div class="arrow" onclick="expand(this)"><img src="images/content/arrow.png" alt=""/> 4</div>
                    <div class="voting"><img src="images/content/voting.png" alt=""/></div>
                    <div class="rank">1585</div>
                    <div class="thumb"><img src="images/content/thumb4.png" alt=""/></div>
                    <div class="link-title"><a href="#link4">Keep Calm</a>
                         <span class="link-src"><a href="#link4src">(flickr.com)</a></span>
                    </div>
                    <div class="link-meta">posted: 19.11.2012 08:45 by hello1 | subreddit: funny</div>
                </div>
                <!-- link 5 -->
                 <div class="link" id="5">
                    <div class="arrow" onclick="expand(this)"><img src="images/content/arrow.png" alt=""/> 5</div>
                    <div class="voting"><img src="images/content/voting.png" alt=""/></div>
                    <div class="rank">1678</div>
                    <div class="thumb"><img src="images/content/thumb5.png" alt=""/></div>
                    <div class="link-title"><a href="#link5">Kevin McCallister's "Battle Plan" from Home Alone (1990)</a>
                         <span class="link-src"><a href="#link5src">(youtube.com)</a></span>
                    </div>
                    <div class="link-meta">posted: 12.09.2012 10:25 by moviefan | subreddit: movies</div>
                </div>
                <!-- link 6 -->
                 <div class="link" id="6">
                    <div class="arrow" onclick="expand(this)"><img src="images/content/arrow.png" alt=""/> 6</div>
                    <div class="voting"><img src="images/content/voting.png" alt=""/></div>
                    <div class="rank">1312</div>
                    <div class="thumb"><img src="images/content/thumb1.png" alt=""/></div>
                    <div class="link-title"><a href="#link6">fire tornadoes in Australia have been confirmed as real, category EF3, 250kph winds an...</a>
                         <span class="link-src"><a href="#link6src">(usatoday.com)</a></span>
                    </div>
                    <div class="link-meta">posted: 22.08.2012 23:45 by user1 | subreddit: science</div>
                </div>
                <!-- link 7 -->
                 <div class="link" id="7">
                    <div class="arrow" onclick="expand(this)"><img src="images/content/arrow.png" alt=""/> 7</div>
                    <div class="voting"><img src="images/content/voting.png" alt=""/></div>
                    <div class="rank">1021</div>
                    <div class="thumb"><img src="images/content/thumb2.png" alt=""/></div>
                    <div class="link-title"><a href="#link7">Bomb Explodes Right Near Anderson Cooper During Live Report From Gaza</a>
                         <span class="link-src"><a href="#link7src">(washintonpost.com)</a></span>
                    </div>
                    <div class="link-meta">posted: 24.10.2012 13:33 by userXYZ | subreddit: videos</div>
                </div>
                <!-- link 8 -->
                 <div class="link" id="8">
                    <div class="arrow" onclick="expand(this)"><img src="images/content/arrow.png" alt=""/> 8</div>
                    <div class="voting"><img src="images/content/voting.png" alt=""/></div>
                    <div class="rank">1302</div>
                    <div class="thumb"><img src="images/content/thumb3.png" alt=""/></div>
                    <div class="link-title"><a href="#link8">Hostess took Union members self funded pensions without their authorization to pay t...</a>
                         <span class="link-src"><a href="#link8src">(usatoday.com)</a></span>
                    </div>
                    <div class="link-meta">posted: 25.03.2012 15:13 by anotheruser | subreddit: politics</div>
                </div>
                <!-- link 9 -->
                 <div class="link" id="9">
                    <div class="arrow" onclick="expand(this)"><img src="images/content/arrow.png" alt=""/> 9</div>
                    <div class="voting"><img src="images/content/voting.png" alt=""/></div>
                    <div class="rank">1585</div>
                    <div class="thumb"><img src="images/content/thumb4.png" alt=""/></div>
                    <div class="link-title"><a href="#link9">Kevin McCallister's "Battle Plan" from Home Alone (1990)</a>
                         <span class="link-src"><a href="#link9src">(youtube.com)</a></span>
                    </div>
                    <div class="link-meta">posted: 12.09.2012 10:25 by moviefan | subreddit: movies</div>
                </div>
                <!-- link 10 -->
                 <div class="link" id="10">
                    <div class="arrow" onclick="expand(this)"><img src="images/content/arrow.png" alt=""/> 10</div>
                    <div class="voting"><img src="images/content/voting.png" alt=""/></div>
                    <div class="rank">1585</div>
                    <div class="thumb"><img src="images/content/thumb5.png" alt=""/></div>
                    <div class="link-title"><a href="#link10">Kevin McCallister's "Battle Plan" from Home Alone (1990)</a>
                         <span class="link-src"><a href="#link10src">(youtube.com)</a></span>
                    </div>
                    <div class="link-meta">posted: 12.09.2012 10:25 by moviefan | subreddit: movies</div>
                </div> 
                <!-- link 11 -->
                 <div class="link" id="11">
                    <div class="arrow" onclick="expand(this)"><img src="images/content/arrow.png" alt=""/> 11</div>
                    <div class="voting"><img src="images/content/voting.png" alt=""/></div>
                    <div class="rank">1585</div>
                    <div class="thumb"><img src="images/content/thumb1.png" alt=""/></div>
                    <div class="link-title"><a href="#link11">Kevin McCallister's "Battle Plan" from Home Alone (1990)</a>
                         <span class="link-src"><a href="#link11src">(youtube.com)</a></span>
                    </div>
                    <div class="link-meta">posted: 12.09.2012 10:25 by moviefan | subreddit: movies</div>
                </div>   
            </div>
        
        </div>
		
		<!-- FOOTER -->
		
		<footer class="login_on">
			<div id="submitLinkContainer">
				<div class="footer_arrow"> </div>
				<label id="submitLinkLabel" class="link">submit a link</label>
				<form id="submitLinkForm">
					<label>You are submitting a link. The key to a successfull submission is interesting content and a descriptive title.</label>
					<table>
						<tr>
							<td><label>url:</label></td>
							<td><input type="text" placeholder="http://"/></td>
						</tr>
						<tr>
							<td><label>description:</label></td>
							<td><input type="text" placeholder="Describe your link"/></td>
						</tr>
						<tr>
							<td><label>subreddit:</label></td>
							<td><input type="text" placeholder="In which subreddit do you want to post your link?"/></td>
						</tr>
						<tr>
							<td> </td>
							<td><button value="submit">submit</button></td>
						</tr>
					</table>
				</form>
			</div>
		</footer>
	</body>
</html>
